<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import Icon from "@iconify/svelte";
    import Rate from "./Rate.svelte";
    import Space from "../Space/Space.svelte";
    import Button from "../Button/Button.svelte";

    const { Story } = defineMeta({
        title: "Components/Form/Rate",
        component: Rate,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Rate>
            {#snippet icon()}
                <Icon icon="mdi:star" width={24} height={24} />
            {/snippet}
        </Rate>
    {/snippet}
</Story>

<Story name="Disabled" args={{ disabled: true }}>
    {#snippet template(args)}
        <Rate {...args}>
            {#snippet icon()}
                <Icon icon="mdi:star" width={24} height={24} />
            {/snippet}
        </Rate>
    {/snippet}
</Story>

<Story name="Count" args={{ count: 3 }}>
    {#snippet template(args)}
        <Rate {...args}>
            {#snippet icon()}
                <Icon icon="mdi:star" width={24} height={24} />
            {/snippet}
        </Rate>
    {/snippet}
</Story>

<Story name="Half" args={{ allowHalf: true }}>
    {#snippet template(args)}
        <Rate {...args}>
            {#snippet icon()}
                <Icon icon="mdi:star" width={24} height={24} />
            {/snippet}
        </Rate>
    {/snippet}
</Story>
